<template>
  <div style="width: 100%">
    <el-form
      :model="fromData"
      ref="appFrom"
      label-width="120px"
      size="small"
      :rules="rules"
      :disabled="disabled"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="中文名称：" prop="nameCn">
            <el-input v-model="fromData.nameCn"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="应用名称：">
            <el-input v-model="fromData.nameEn"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="编码标识：" prop="name">
            <el-input
              :disabled="type !== 'open'"
              v-model="fromData.name"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="环境标识：">
            <el-input v-model="fromData.environment"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="责任人：" prop="managerUserId">
            <el-select v-model="fromData.managerUserId" multiple filterable>
              <template v-for="item in userList">
                <el-option
                  :label="item.username"
                  :value="item.pid"
                  :key="item.pid"
                ></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="登录方式：" prop="authorizedGrantTypes">
            <el-select v-model="fromData.authorizedGrantTypes">
              <template v-for="{ name, value } in authorizedGrantTypesList">
                <el-option :label="name" :value="value"></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="应用地址：">
            <el-input v-model="fromData.webServerRedirectUri"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="数据库：" prop="databaseOid">
            <el-select v-model="fromData.databaseOid">
              <template v-for="item in dataBaseList">
                <el-option
                  :label="item.name"
                  :value="item.oid"
                  :key="item.name"
                ></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="客户端ID：" prop="clientId">
            <el-input v-model="fromData.clientId"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户端密钥：" prop="clientSecret">
            <el-input v-model="fromData.clientSecret"></el-input>
          </el-form-item>
        </el-col>
        
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="OSS" prop="ossOid">
            <el-select v-model="fromData.ossOid">
              <template v-for="item in OSSList">
                <el-option
                  :label="item.name"
                  :key="item.oid"
                  :value="item.oid"
                ></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="布局" prop="layoutId">
            <el-select v-model="fromData.layoutId">
              <template v-for="item in layoutList">
                <el-option
                  :label="item.nameCn"
                  :key="item.layoutId"
                  :value="item.layoutId"
                ></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="描述：">
            <el-input
              type="textarea"
              rows="5"
              resize="none"
              v-model="fromData.describeCn"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="md-component-btns">
      <el-button size="medium" type="primary" @click="save" :disabled="disabled"
        >保存</el-button
      >
      <el-button size="medium" @click="$emit('removeThisTabs')">取消</el-button>
    </div>
  </div>
</template>
<script>
import { getDic } from "@/api/common";
import * as api from "@/api/application/index";
import * as oss from "@/api/OSSManage/index";

export default {
  name: "applicationTemp",
  data() {
    return {
      fromData: {
        name: "",
        nameCn: "",
        nameEn: "",
        ossOid: "",
        environment: "",
        describeCn: "",
        clientId: "",
        clientSecret: "",
        authorizedGrantTypes: "",
        webServerRedirectUri: "",
        databaseOid: "",
      },
      disabled: false,
      authorizedGrantTypesList: [],
      dataBaseList: [],
      userList: [],
      rules: {
        managerUserId: [
          { required: true, message: "请选择责任人", trigger: "blur" },
        ],
        nameCn: [
          { required: true, message: "请输入中文名称", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入编码标识", trigger: "blur" }],
        ossOid: [{ required: true, message: "请选择OSS", trigger: "change" }],
        clientSecret: [
          { required: true, message: "请输入客户端密钥", trigger: "blur" },
        ],
        authorizedGrantTypes: [
          { required: true, message: "请选择登录方式", trigger: "blur" },
        ],
        databaseOid: [
          { required: true, message: "请选择数据库", trigger: "blur" },
        ],
        clientId: [
          { required: true, message: "请输入客户端ID", trigger: "blur" },
        ],
      },

      OSSList: [],
      layoutList: [],
    };
  },
  props: {
    type: String,
    data: Object,
  },
  methods: {
    save() {
      this.$refs.appFrom.validate((f) => {
        if (f) {
          const paramsData = {
            ...this.fromData,
            managerUserId: this.fromData.managerUserId.join(","),
          };
          if (this.type === "edit") {
            api.update(paramsData).then(() => {
              this.$message.success("保存成功");
              this.$emit("refresh");
              this.$emit("removeThisTabs");
            });
          } else {
            api.add(paramsData).then(() => {
              this.$message.success("保存成功");
              this.$emit("refresh");
              this.$emit("removeThisTabs");
            });
          }
        }
      });
    },
    open() {
      this.disabled = false;
    },
    view() {
      this.disabled = true;
    },
    edit() {
      this.disabled = false;
    },
    geAuthorizedGrantTypes() {
      getDic("authorizedGrantTypes").then((res) => {
        this.authorizedGrantTypesList = res.data.data;
      });
    },
    getDataBaseList() {
      api.getDataBaseList({}).then((res) => {
        this.dataBaseList = [...this.dataBaseList,...res.data.data];
      });
    },
    getUserList() {
      api.getUserList({}).then((res) => {
        this.userList = res.data.data;
      });
    },
    getOSS() {
      oss.getListData().then((res) => {
        this.OSSList = res.data.data;
      });
    },
    getLayoutList() {
      const params = {
         state: 1
      }
      if(this.data.oid && this.data.oid > 0){
        params.applicationId = this.data.oid
      }
      api.getLayoutList(params).then((res) => {
        this.layoutList= res.data.data || [];
      });
    },
  },
  mounted() {
    this.dataBaseList = [];
    this.geAuthorizedGrantTypes();
    this.getDataBaseList();
    this.getUserList();
    this.getOSS();
    this.getLayoutList();
    if (this.type === "edit" || this.type === "view") {
      api.getDetail({ id: this.data.oid }).then((res) => {
        const newData = res.data.data;
        this.dataBaseList.unshift({
          name: newData.databaseName,
          oid:newData.databaseOid
        })
        this.fromData = {
          ...this.fromData,
          ...res.data.data,
          managerUserId: newData.managerUserId
            ? newData.managerUserId.split(",")
            : [],
        };
      });
    }
  },
};
</script>
<style scoped>
</style>
